<template>
  <div>
    <zh-form
        :span="6"
        ref="rolePageFrom"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        :model="formData"
        :rules="rules">

      <zh-card title="总体态势信息" style="width:100%">
        <zh-row >
          <zh-input
              prop="zb1"
              :disabled="disabled"
              type="select"
              label="指标1"
              with="100%"
              :options="zb1List"
              :defaultFields="{ label: 'value', value: 'key' }"
              v-model="formData.zb1"
          ></zh-input>
          <zh-input
              prop="zb2"
              :disabled="disabled"
              type="select"
              label="指标2"
              :options="zb2List"
              :defaultFields="{ label: 'value', value: 'key' }"
              v-model="formData.zb2"
          ></zh-input>
          <zh-input
              prop="orgId"
              :disabled="disabled"
              type="select"
              :options="sqData"
              :defaultFields="{ label: 'orgName', value: 'orgId' }"
              label="县市区"
              v-model="formData.orgId"
          ></zh-input>
          <zh-input
              prop="num"
              :disabled="disabled"
              type="number"
              label="排行"
              v-model="formData.num"
          ></zh-input>
          <zh-input
              prop="mc"
              :disabled="disabled"
              type="text"
              label="名称"
              v-model="formData.mc"
          ></zh-input>
          <zh-input
              v-if="formData.zb2==='热门古迹'"
              prop="jj"
              :disabled="disabled"
              type="number"
              label="人流量"
              v-model="formData.jj"
          ></zh-input>

        </zh-row>
      </zh-card>
    </zh-form>
  </div>
</template>

<script>
import {
  getSQAndWz, getZztsRdXgDetails, saveZztsRdXg
} from "@/services/system/whdngxlApi";
import modal from "ant-design-vue/lib/modal";

export default {
  name: "ZztsRdXgForm",
  components: {
  },
  props:{
    listQuery:{
      type:Function,
      default:null
    }
  },
  data() {
    return {
      dictData: {},
      disabled: false,
      formData: {
        zb1:'',
        zb2:'',
        orgId:'',
        orgName:'',
        num:'',
        mc:'',
        jj:'',
      },
      sqData:[],
      labelCol: {
        xs: {span: 24},
        sm: {span: 8},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      rules: {},
      visible:false,
      zb1List:[
          {key:'总体态势',value:'总体态势'},
      ],
      zb2List:[
        {key:'热门古迹',value:'热门古迹'},
        {key:'关注热点',value:'关注热点'},
      ],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init(){
      this.$http.post(getSQAndWz, {}).then((res) => {
        this.sqData = res.result.sqData;
      });
    },
    initData(row, type){
      this.disabled = type === 'view'
      if(row.id){
        this.$http.post(getZztsRdXgDetails, {id:row.id}).then((res) => {
          this.formData = res.result;
        });
      }
    },
    saveData() {
      this.$loading.show('正在处理数据,请等待...')
      if (this.formData.orgId){
        this.formData.orgName = this.sqData.find(item => item.orgId === this.formData.orgId).orgName
      }
      const params = Object.assign(this.formData)
      setTimeout(() => {
        this.$http.post(saveZztsRdXg, params).then((res) => {
          this.$message.info('保存成功')
          this.$emit("handleCancel")
          if(this.listQuery){
            this.listQuery()
          }
          this.$loading.hide()
        }).catch((error) => {
          console.log(JSON.stringify(error))
          this.$loading.hide()
        }).finally(() =>{
        })
      }, 50)
    },
  },
}
</script>

<style scoped>

</style>